<template>
	<view>
		<view>
			<view style="padding-left:20rpx">
				<view class="leaveNav">
					<view style="margin-left:60rpx;font-weight: 800;font-size: 46rpx;">宿舍登记
						<view class="leaveLine"></view>
					</view>
					<button class="leaveBtn" @click="leaveBtnFun()">提交</button>
				</view>
				<view class="schoolTitle">
					<view>
						<!-- <view class="uni-title uni-common-pl">地区选择器</view> -->
						<view class="uni-list">
							<view class="uni-list-cell" style="display: flex;justify-content: space-around;">
								<view class="uni-list-cell-left" style="font-size: 36rpx;">
									班级 :
								</view>
								<view class="uni-list-cell-db">
									<view class="titleInput" style="color:#0000FE"><input placeholder="请输入班级"
											v-model="classNameNew" @input="showClassName"
											style="padding-left: 15rpx; font-size: 28rpx;" />
									</view>
								</view>
								
								<uni-popup ref="popup" type="bottom">
									<view class="Popup">
										<view style="display: flex;justify-content: center;align-items: center; border-bottom: 0.1px solid #e9e9e9;margin: 10rpx;padding: 10rpx;">请选择班级</view>
										
										<view @click="bindPickerChange(item)" v-for="item in arrNew"
											style="display: flex;justify-content: center;align-items: center; border-bottom: 0.1px solid #e9e9e9;margin: 10rpx;padding: 10rpx;">
											{{item.className}}
										</view>
									</view>
								</uni-popup>
								<view class="uni-list-cell-left" style="font-size: 36rpx;margin-left:30rpx;">
									姓名 :
								</view>
								<view class="uni-list-cell-db">
									<picker @change="bindPickerChangeName($event,classNameArr)" class="titleInput"
										:value="index1" :range="classNameArr">
										<view class="uni-input" style="padding-left:20rpx">{{classNameArr[index1]}}
										</view>
									</picker>
								</view>
							</view>
						</view>
						<!-- <input v-model="className"  class="titleInput"/> -->
					</view>
					<!-- 		<view style="display: flex;justify-content: space-around;">姓名：
						<input v-model="stuName" class="titleInput"/> </view>		 -->
				</view>
				<view style="margin-top:30rpx;margin-left:38rpx;font-size: 36rpx;color:#8F8F94">学号：
					<view style="width:465rpx; border: #C0C0C0 solid 1rpx;
					border-radius: 10rpx;padding: 8rpx;margin-left:106rpx;margin-top:-50rpx">
						<input class="uni-input" style="padding-left:20rpx;font-size: 32rpx;" v-model="stuNo" />
					</view>
				</view>

				<view class="repCheckout">
					<view v-for="(item,index) in schoolDv" :key="index">
						<view @click="checkFun(item)">
							<view :class="[{'checkBg':item.isShow}]" class="leaveCheck">{{item.title}}</view>
						</view>
					</view>
				</view>
				<view class="repDevice" style="margin-bottom: 30rpx;">详细记录</view>
				<textarea class="repText" v-model="repairDesc" placeholder="备注信息"></textarea>
				<view class="repDevice" style="margin-top:50rpx;">拍照</view>
				<view>
					<view class="repDevice" style="position: relative;top:180rpx;left:230rpx">上传照片</view>
					<image @click="chooseImage" :src="imgShow" class="imgSty" mode=""></image>
				</view>
				<view class="logoSty" style="margin-left:-20rpx"></view>
			</view>

		</view>
		<!-- <my-bottom :topName="topName" :bottomArr="attendanceArr" :bottomName="bottomName"></my-bottom> -->
	</view>
</template>

<script>
	import {
		pathToBase64,
		base64ToPath
	} from '../../utils/index.js'
	import topCom from '../component/topCom.vue'
	import bottomCom from '../component/bottom.vue'
	import * as imageConversion from 'image-conversion'
	export default {
		name: 'leaveManagement',
		data() {
			return {
				file:null,
				attendanceArr: [
					{
					    name:'home',
					    icon:'iconfont icon-yonghutongji',
					    text:"首页",
					    path: '/pages/instructor/instructorIndex'
					},
								
					{
					    name:'maintenance',
					    icon:'iconfont icon-shezhi',
					    text:"退出",
					    path: '/pages/index/login'
					},
				],
				bottomName: 'home',
				stuNo: "",
				index1: 0,
				repairDesc: "",
				className: '',
				classNameArr: [],
				index: 0,
				classArr: ['261', '265', '268'],
				stuName: "",
				imgShow: '',
				userName: '',
				studentList: [],
				leaveDaysArray: [],
				phoneArray: [],
				studentNoArray: [],
				topName: "宿舍违纪登记",
				schoolDv: [{
					id: 18,
					title: "宿舍抽烟",
					isShow: false,
				}, {
					id: 10,
					title: "携带外卖",
					isShow: false,
				}, {
					id: 12,
					title: "打架斗殴",
					isShow: false,
				}, {
					id: 13,
					isShow: false,
					title: "饮酒酗酒"
				}, {
					id: 14,
					isShow: false,
					title: "打牌赌博"
				}, {
					id: 15,
					isShow: false,
					title: "翻爬围墙"
				}, {
					id: 16,
					isShow: false,
					title: "谩骂他人"
				}, {
					id: 17,
					isShow: false,
					title: "携带违禁品"
				}, {
					id: 20,
					isShow: false,
					title: "其他"
				}, ],
				dvType: 0,
				classId: 0,
				classList: "",
				photo: [],
				roleName: '',
				dataList: ''
			}
		},
		mounted() {
			this.getAllAppClassList()
		},
		onShow() {
			var that = this
			uni.getStorage({
				key: 'userInfo',
				success(res) {
					that.userName = res.data
				}
			})
			uni.getStorage({
				key: 'loginName',
				success: (res) => {
					that.roleName = res.data
				}
			})
		},
		components: {
			topCom,
			bottomCom
		},
		computed: {

		},
		methods: {
			getClassStuListByClassId(className) {
				this.$api.instructor.getClassStuListByClassId(className).then(res => {
					var classNameList = res.data
					this.studentList = res.data
					this.classNameArr = []
					if (res.data.length > 0) {
						classNameList.forEach((item, index) => {
							this.classNameArr.push(item.studentName)
						})
						this.stuNo = this.studentList[this.index1].studentNo
						// this.$forceUpdate()
					}

				})
			},
			bindPickerChangeName(e, item) {
				this.index1 = e.target.value
				console.log(this.index1, "index")
				this.stuNo = this.studentList[this.index1].studentNo
			},
			bindPickerChange(item) {
				this.classId = item.classId;
				this.getClassStuListByClassId(item.classId);
				this.classNameNew = item.className;
				this.$refs.popup.close();
				this.$forceUpdate()
			},
			leaveBtnFun() {
				if (this.classId == '' || this.stuNo == '' || this.repairDesc == '') {
					uni.showToast({
						title: "请填写完整信息后提交",
						icon: "none"
					})
				} else {
					this.createInstructorRecordDv()
				}

				// uni.navigateTo({
				// 	url:"/pages/instructor/historyList"
				// })
			},
			getAllAppClassList() {
				this.$api.instructor.getAllAppClassList().then(res => {
					this.dataList = res.data
					this.classArr = []
					this.dataList.forEach((item, index) => {
						this.classArr.push(item.className)
					})
					this.classList = res.data
					this.getClassStuListByClassId(this.dataList[this.index].classId)
					this.$forceUpdate()
				})
			},
			
			// dvDate,classId,dvType,studentNo,dvDesc,dvArea,createBy,upload
			createInstructorRecordDv() {
				
				if(this.imgShow==''){
					uni.showToast({
						title:"请上传图片"
					})
					return;
				}
				
				uni.showLoading({
					title: '图片上传中',
					mask: true
				});
				
				uni.uploadFile({
					// http://192.168.200.143:9004/app/ClassRepair/createClassRepairUpload
					// url: 'http://192.168.200.143:9004/app/ClassRepair/createClassRepairUpload',
					url: uni.url + 'ClassDv/createInstructorRecordDv',
					filePath: this.imgShow,
					name: "upload",
					file: this.file,
				
					
					formData: {
						classId: this.classId,
						dvDate: this.$date,
						dvDesc: this.repairDesc,
						dvArea: 2,
						createBy: this.roleName,
						studentNo: this.stuNo,
						dvType: this.dvType
						// form.append("classId", this.classList[this.index].classId);
						// 	form.append("dvDate", this.$date);
						// 	form.append("dvDesc", this.repairDesc);
						// 	form.append("dvArea", 3);
						// 	form.append("createBy", this.roleName);
						// 	form.append("studentNo", this.stuNo)
						// 	form.append("dvType", this.dvType)
					},
					success: (res) => {
						console.log(res);
						setTimeout(function() {
							uni.hideLoading();
						}, 2000);
						uni.navigateTo({
							url: "/pages/instructor/historyList",
							success: res => {},
							fail: () => {},
							complete: () => {}
						});
					},
					fail: (res) => {
						console.log(res);
					}
				})
				// let base64 = {
				// 	dataURL: this.imgShow, //用url方式表示的base64图片数据
				// 	type: 'image/jpeg' //文件类型
				// }
				// var img = this.convertBase64UrlToBlob(base64)
				// console.log(this.classList[this.index].classId)
				// var id = this.classList[this.index].classId
				// imageConversion.compressAccurately(img, 500).then(res => {
				// 	uni.showLoading({
				// 		title: '图片上传中',
				// 		mask: true
				// 	});
				// 	res = new File([res], img.name, {
				// 		type: res.type,
				// 		lastModified: Date.now()
				// 	})
				// 	var form = new FormData();
				// 	form.append("upload", res);
				// 	form.append("classId", this.classList[this.index].classId);
				// 	form.append("dvDate", this.$date);
				// 	form.append("dvDesc", this.repairDesc);
				// 	form.append("dvArea", 2);
				// 	form.append("createBy", this.roleName);
				// 	form.append("studentNo", this.stuNo)
				// 	form.append("dvType", this.dvType)
				// 	this.$http.post('ClassDv/createInstructorRecordDv', form).then(res => {
				// 		setTimeout(function() {
				// 			uni.hideLoading();
				// 		}, 2000);
				// 		uni.navigateTo({
				// 			url: "/pages/instructor/historyList",
				// 			success: res => {},
				// 			fail: () => {},
				// 			complete: () => {}
				// 		});

				// 	})
				// 	//   resolve(res)
				// 	// })

				// })
				// const data = this.$qs.stringify({
				// 		dvDate:this.$date,
				// 		classId:id,
				// 		dvType:this.dvType,
				// 		studentNo:this.stuNo,
				// 		dvDesc:this.repairDesc,
				// 		dvArea:3,
				// 		createBy:this.userName,
				// 		upload:img,
				//      });		

				//         var {data : res} =   this.$http({
				//           method: "post",
				//           url: 'ClassDv/createInstructorRecordDv',
				//           headers: {
				//             "Content-Type": "multipart/form-data",
				//           },
				//           data: form,
				//         })				
			},
			checkFun(item) {
				// item.isShow=!item.isShow				
				// if(item.title=="其他"){
				// 	this.schoolDv.forEach((i,index)=>{
				// 		i.isShow = false
				// 	})
				// 	item.isShow = true
				// }
				this.schoolDv.forEach((i, index) => {
					i.isShow = false
				})
				item.isShow = true
				this.dvType = item.id

			},
			chooseImage() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: async res => {
						console.log(res)
						this.imgShow = res.tempFilePaths[0]; //500kb
						this.file = await imageConversion.compressAccurately(res.tempFiles[0], 500)

					}

				})
			}



		},

	}
</script>

<style>
	.checkBg {
		background-color: #007AFF;
		color: white;
	}

	.imgSty {
		border: solid 1upx #999999;
		border-radius: 20upx;
		width: 590rpx;
		height: 300upx;
		margin: auto;
		padding: 10upx;
		margin-left: 35rpx;
		margin-top: 0rpx
	}

	.repText {
		border: solid 1upx #999999;
		border-radius: 20upx;
		width: 580rpx;
		height: 150upx;
		margin: auto;
		padding: 10upx;
		margin-left: 35rpx;
	}

	.repCheckout {
		display: flex;
		justify-content: space-between;
		align-content: center;
		flex-wrap: wrap;
		font-size: 28upx;
		color: #808080;
		margin-top: 30upx;
		width: 80%;
		margin-left: 50upx;
	}

	.repDevice {
		text-align: left;
		font-size: 36rpx;
		color: #808080;
		padding-left: 45rpx;
	}

	.titleInput {
		border: #C0C0C0 solid 1rpx;
		border-radius: 10rpx;
		width: 170rpx;
		height: 50rpx;
		color: #999999;
		padding-top: 10rpx;
		margin-left: 18rpx;
		/* text-align:  center; */
	}

	.schoolTitle {
		width: 600rpx;
		display: flex;
		justify-content: space-around;
		align-content: space-around;
		color: #999999;
		font-size: 28rpx;
		margin-left: 30rpx;
	}

	.repCheckout {
		display: flex;
		justify-content: space-between;
		align-content: center;
		flex-wrap: wrap;
		font-size: 28upx;
		color: #808080;
		margin-top: 30upx;
		/* width:80%; */
		width: 590rpx;
		margin-left: 38rpx;
	}

	.delSty {
		height: 40rpx;
		background-color: red;
		padding: 0 2rpx;
		color: white;
		border: red solid 1rpx;
		border-radius: 10rpx;
	}

	.delCancel {
		height: 40rpx;
		background-color: #C0C0C0;
		padding: 0 2rpx;
		color: white;
		border: #C0C0C0 solid 1rpx;
		border-radius: 10rpx;
	}

	.isSlect {
		color: red;
	}

	.dateTimeNav {
		display: flex;
		justify-content: space-around;
		align-content: space-between
	}

	.dateTimeNavTitle {
		display: flex;
		justify-content: space-around;
		align-content: space-between;
		width: 400rpx;
	}

	.dateTimeNavTitleInput {
		display: inline-block;
	}

	.timePos {
		position: relative;
		top: 0rpx;
		right: -15rpx;
		background: white;
		border: 1rpx solid #cccc;
		border-radius: 20rpx;
		padding: 20rpx;
		width: 90%;
		text-align: center;
		margin-bottom: 20rpx;
	}

	.fontLeave {
		display: flex;
		justify-content: flex-end;
		align-content: center;
	}

	.checkbox {
		display: flex;
		justify-content: space-around;
		align-content: space-between;
		flex-direction: row;
	}

	.leaveNum {
		width: 30rpx;
		height: 50rpx;
		border: #cccc solid 1rpx;
		border-radius: 10rpx;
		padding-left: 10rpx;
		font-size: 24rpx;
	}

	.leaveNav {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: row;
		font-size: 36upx;
		color: blue;
		width: 100%;
		padding: 50upx
	}

	.leaveBtn {
		background-image: url(https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/tubiao-01.png);
		background-size: 100%;
		width: 220upx;
		height: 70upx;
		color: white;
		font-size: 32rpx;
		font-weight: 0;
		line-height: 70rpx;
	}

	.leaveLine {
		width: 220upx;
		height: 8upx;
		background: rgba(239, 220, 11, 1.0);
		opacity: 0.78;
		position: relative;
		bottom: -10upx;
		left: -20rpx;
	}

	.leaveMgm {
		color: #808080;
		font-size: 28upx;

	}

	.leaveCheck {
		/* margin-left:60upx; */
		margin-bottom: 30rpx;
		width: 150rpx;
		height: 50rpx;
		border: #C0C0C0 solid 1rpx;
		border-radius: 10rpx;
		text-align: center;
		line-height: 50rpx;
		font-size: 30rpx;
		padding: 0 10rpx;

	}

	.checkout {
		display: flex;
		justify-content: space-around;
		align-content: space-between;
	}

	.leaveTabLine {
		width: 3upx;
		height: 60upx;
		background: #8F8F94;
		opacity: 0.78;
		position: relative;
		top: 0upx;
		left: 150upx;
	}
</style>
